<template>
	<view class="p-bot20">
		<!-- #ifdef MP-WEIXIN -->
		<navBar tabBar title="活动"></navBar>
		<!-- #endif -->
		<view class="viewbox auto m-top20" v-if="pageData.length">
			<block v-for="(item,index) in pageData" :key="index">
				<view class="row bgwhite padding20 bor_radius_10 m-bot20" @click="lookEvents(item)">
					<view class="EventsBox">
						<image :src="imgUrls(item.cover)" mode="widthFix" class="rows"></image>
						<view class="finish flexac" v-if="item.state == 3">活动已结束</view>
					</view>
					<text class="ellipsis_3 black size30 bold m-top16 line40" selectable>{{item.name}}</text>
					<text class="rows color_33 h6 m-top10">活动时间：{{item.start_time}}</text>
				</view>

			</block>
		</view>
		<Events v-else title="暂无相关活动~"></Events>

	</view>
</template>

<script setup>
	import { ref, inject } from 'vue';
	import { onLoad, onShow, onReachBottom, onShareAppMessage } from '@dcloudio/uni-app';
	import Http from '@/common/request.js';
	import { usePiniaStore } from '@/store/pinia.js';

	const Pinia = usePiniaStore();
	const { imgUrls, Toast, toUrl } = inject('Utils');
	const page = ref(1);
	const limit = ref(10);
	const getMore = ref(true);
	const pageData = ref([]);

	onLoad(() => {
		getEventList()
	})

	const getEventList = () => {
		Http.get({
			url: '/singleSaleEventApi/getEventList',
			data: {
				page: page.value,
				limit: limit.value,
			}
		}).then(res => {
			if (res.code != '200') return Toast(res.mgs);
			const result = res.data || [];
			page.value == 1 ? pageData.value = result : pageData.value = [...pageData.value, ...result];
			if (result.length < limit.value) getMore.value = false;
		})
	}

	const lookEvents = (item) => {
		toUrl(`/pages/EventsDetails/EventsDetails?event_id=${item.event_id}`)
	}

	onReachBottom(() => {
		if (!getMore.value) return;
		page.value++;
		getEventList();
	})

	onShareAppMessage(() => {
		let share = Pinia.share;
		return {
			title: share.title,
			desc: share.desc,
			path: `/pages/startUp/startUp?share_v_id=${Pinia.vid}`,
			imageUrl: share.imageUrl
		}
	})
</script>
<style lang="scss">
	page {
		background-color: $pageBg;
	}
</style>
<style lang="scss" scoped>
	.EventsBox {
		width: 100%;
		position: relative;
		border-radius: 10rpx;
		overflow: hidden;
		transform: translateY(0);
	}

	.finish {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		color: #ffffff;
		font-size: 28rpx;
	}
</style>